import React, { useState, useEffect } from "react";
import { fetchBio } from "./api";

const Page: React.FC = () => {
  const [person, setPerson] = useState("Alice");
  const [bio, setBio] = useState<string | null>(null);

  useEffect(() => {
    let ignore = false;

    setBio(null);
    fetchBio(person).then(bio => {
      if (!ignore) {
        setBio(bio);
      }
    });

    return () => {
      ignore = true;
    };
  }, [person]);

  return (
    <>
      <select value={person} onChange={e => setPerson(e.target.value)}>
        <option value="Alice">Alice</option>
        <option value="Bob">Bob</option>
        <option value="Taylor">Taylor</option>
      </select>
      <hr />
      <p>
        <i>{bio ?? "加载中..."}</i>
      </p>
    </>
  );
};
export default Page;
